{{include './header.html'}}
<style>
  table td{
    vertical-align: middle !important;
  }
  img{
    width: 120px;
  }
</style>
  <div class="container">
    <button class="btn btn-success" style="margin-bottom: 20px;">添加书籍</button>
    {{if data.length}}
    <table class="table table-bordered text-center" >
      <tr>  
        <td>序号</td>
        <td>书名</td>
        <td>封面</td>
        <td>作者</td>
        <td>价格</td>
        <td>折扣</td>
        <td>销量</td>
        <td>操作</td>

      </tr>
      {{each data.reverse() obj i}}
      <tr>
        <td>{{i+1}}</td>
        <td>{{obj.bookname}}</td>
        <td><img src="./bookimg/{{obj.pic}}" alt=""></td>
        <td>{{obj.author}}</td>
        <td>{{obj.price}}</td>
        <td>{{obj.count}}</td>
        <td>{{obj.num}}</td>
        <td>
          <span class="remove" data-id="{{obj.id}}">
            <i class="glyphicon glyphicon-trash"></i>
            
          </span>
          <span class="update" data-id="{{obj.id}}">
            <i class="glyphicon glyphicon-edit"></i>
          
          </span>
        </td>
      </tr>
      {{/each}}
    </table>
    {{else}}
       <h1>当前还没有添加任何的书籍！！</h1>
    {{/if}}
  </div>
  <script>
    $('button').click(function(){
      location.href='/addbook'
    })
    $('.remove').click(function(){
      $.get('/removebook?id='+ this.dataset.id,data=>{
        $('#showinfo').modal('show').find('.modal-body').text(data)
        $('#showinfo').on('hide.bs.modal', function () {
            location.reload()
        })
      })
    })

    $('.update').click(function(){
       location.href='/updatebook?id=' + this.dataset.id
    })
  </script>
</body>
</html>